<template>
    <div class="Layout">
        <EditorVue ref="Editor" />
    </div>
</template>
<script lang="ts" setup>
import { onMounted, ref } from 'vue';
import EditorVue from '../_Editor/index.vue';


const props = defineProps({
    Codes: {
        tyep: String,
        default: ''
    }
});


const Editor = ref();

onMounted(() => {
    var CodeMapping: Record<string, string> = {};
    var CodeStr: string[] = props.Codes.split('<<$$$@#*^^^|||PageSegmentation|||^^^*#@$$$>>');
    for (let i = 0; i < CodeStr.length; i++) {
        const _code = CodeStr[i].split('<<$$^^|^^$$>>');
        CodeMapping[_code[0]] = _code[1];
    };
    setTimeout(() => {
        Editor.value.SetCode(CodeMapping);
    }, 200)
})

const GetCodes = function () {
    var files = Editor.value.GetCode();
    var Codes = [];
    for (const key in files) {
        const element = files[key];
        if (key != 'main.js' && key != 'import-map.json') {
            Codes.push(key + '<<$$^^|^^$$>>' + element.code);
        };
    };
    return Codes.join('<<$$$@#*^^^|||PageSegmentation|||^^^*#@$$$>>');
};

defineExpose({
    GetCodes
});

</script>
<style lang="less" scoped>

.Layout {
    width: 100%;
    height: 100%;
    position: relative;
    overflow: hidden;
}

</style>